<template>
  <div
    class="suspension-btn"
    @mousedown="down"
    @touchstart.stop="down"
    @mousemove="move"
    @touchmove.stop="move"
    @mouseup="end"
    @touchend.stop="end"
    @click="enterToLeaveMessagePage"
    :style="{top:position.y+'px', left:position.x+'px'}"
  >
    <img :src="leaveMessageImg" alt="">
    <span>留言</span>
  </div>
</template>

<script>
var dx, dy;
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
export default {
  name: "SuspensionBtn",
  components: {},
  data() {
    return {
      flags: false,
      position: {
        x: "80%",
        y: "75%",
      },
      leaveMessageImg: require("../common/imgs/leave-message.png"),
    };
  },
  methods: {
    // 实现移动端拖拽
    down(event) {
      this.flags = true;
      var touch;
      if (event.touches) {
        touch = event.touches[0];
      } else {
        touch = event;
      }
      // console.log("鼠标点所在位置", touch.clientX, touch.clientY);
      // console.log(
      //   "div左上角位置",
      //   event.target.offsetTop,
      //   event.target.offsetLeft
      // );
      dx = touch.clientX - event.target.offsetLeft;
      dy = touch.clientY - event.target.offsetTop;
    },
    move(e) {
      if (this.flags) {
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        // 定位滑块的位置
        this.position.x = touch.clientX - dx;
        this.position.y = touch.clientY - dy;
        // 限制滑块超出页面
        // console.log('屏幕大小', screenWidth, screenHeight )
        if (this.position.x < 0) {
          this.position.x = 0;
        } else if (this.position.x > screenWidth - touch.target.clientWidth) {
          this.position.x = screenWidth - touch.target.clientWidth;
        }
        if (this.position.y < 0) {
          this.position.y = 0;
        } else if (this.position.y > screenHeight - touch.target.clientHeight) {
          this.position.y = screenHeight - touch.target.clientHeight;
        }
        if(this.position.x < 8){
          this.position.x = 8;
        }
        if(this.position.x > document.documentElement.clientWidth-8-e.target.getBoundingClientRect().height){
          this.position.x = document.documentElement.clientWidth-8-e.target.getBoundingClientRect().height;
        }
        if(this.position.y < 8){
          this.position.y = 8;  
        }
        if(this.position.y > document.documentElement.clientHeight-8-e.target.getBoundingClientRect().height){
          this.position.y = document.documentElement.clientHeight-8-e.target.getBoundingClientRect().height;  
        }
        //阻止页面的滑动默认事件
        document.addEventListener(
          "touchmove",
          function () {
            event.preventDefault();
          },
          false
        );
      }
    },
    //鼠标释放时候的函数
    end() {
      this.flags = false;
    },
    enterToLeaveMessagePage(){
      this.$emit('enterToLeaveMessagePage')
    }
  },
};
</script>

<style scoped lang="less">
.suspension-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 112px;
  height: 112px;
  background: #ffffff;
  box-shadow: 0px 4px 8px 0px rgba(143, 138, 227, 0.5);
  border-radius: 50%;
  img{
    width: 56px;
    height: 56px;
  }
  span{
    font-size: 20px;
    font-weight: 500;
    color: #222222;
  }
}
</style>
